<template>
	<div class="mobileMonitorOverview" v-loading="mobileMonitorLoading">
		<div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="车辆编号">
          <el-select v-model="searchForm.vehicleId" placeholder="请选择车辆编号">
            <el-option v-for="item of vehicleNumList" :key="item.id" :label="item.name" :value="item.name" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" label-width="80px">
          <el-col :span="11">
             <el-date-picker
              v-model="searchForm.startTime"
              type="date"
              style="width: 100%"
              :clearable="false"
              value-format="yyyy-MM-dd"
              placeholder="选择开始日期">
            </el-date-picker>
          </el-col>
          <el-col :span="2" class="line"> - </el-col>
          <el-col :span="11">
             <el-date-picker
              v-model="searchForm.endTime"
              type="date"
              style="width: 100%"
              :clearable="false"
              value-format="yyyy-MM-dd"
              placeholder="选择结束日期">
            </el-date-picker>
          </el-col>
         
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
          <!-- <el-button type="primary" class="greenBtn" size="mini">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="mapBox">
      <div class="map" id="map"></div>
    </div>
    <div class="dataList">
      <div class="title">数据列表</div>
      <el-table :data="mobileData.data" size="mini" stripe
        style="width: 95%;margin: 0 auto"
        :default-sort = "{prop: 'pollutionIndex', order: 'descending'}"
        :header-cell-style="{color: '#666', backgroundColor: '#f6f6f6', borderBottom: 'none'}"
        :cell-style="{border: 'none'}"
      >
        <el-table-column
          prop="name"
          label="时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="vehicleId"
          label="车辆编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="person"
          label="监测人员"
          align="center">
        </el-table-column>
        <el-table-column
          prop="pollutionIndex"
          sortable
          :sort-orders = "['ascending', 'descending']"
          label="污染指数"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.pollutionIndex > standard.pollutionIndex ? 'TableWarnRed' : '']">{{scope.row.pollutionIndex}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="waterStatus"
          label="水质状况"
          align="center">
        </el-table-column>
        <el-table-column
          prop="overFactor"
          label="首要超标因子"
          align="center">
        </el-table-column>
        <el-table-column
          prop="pointNumber"
          label="点位数量"
          align="center">
        </el-table-column>
        <el-table-column
          prop="operate"
          label="详情"
          width="100"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="routerDetail(scope.row.routingName)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <myPaging :func="pageUpdate" :total="mobileData.total"></myPaging>
    </div>
	</div>
</template>
<script>
import MapLoader from "../plugins/AMap.js";
import common from '@/plugins/common'
import { mapGetters, mapActions } from 'vuex'
import myPaging from '@/components/myPaging.vue'
import standard from '../plugins/standard.js';

let map = null
export default {
  name: 'mobileMonitorOverview',
  data () {
    return {
      msg: 'hello mobileMonitorOverview!',
      mobileMonitorLoading: false,
      map: null,
      searchForm: {
        vehicleId: '',
        startTime: '',
        endTime: '',
      },
      lng: 113.870271,
      lat: 22.555647,
      
      standard
		}
  },
	methods: {
    ...mapActions([
      'getMobileMonitorData',
      'getVehicleNumList'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.mobileMonitorLoading = true
      await this.getMobileMonitorData({...this.searchForm, ...pageOption})

      this.drawLineOrPoint(map, this.mobileData.data)
      
      this.mobileMonitorLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    async mapInit() {
      await MapLoader().then(
        AMap => {
          map = new AMap.Map("map", {
            mapStyle: 'amap://styles/b23dc72b03be03f4dd932c413bc85c94',
            center: [113.850234,22.673635],
            zoom: 11,
            zooms: [11, 18]
          });
        },
        e => {
        }
      );
    },
    drawLineOrPoint(map, data) {
      map && map.clearMap() // 使用clearMap方法删除所有覆盖物
      let dataMarker, infoWindow, dataMarkers = []
      let imgLeft = 0, imgTop = 0
      let path = []
      // 绘制数据点
      for(let i = 0, lineLen = data.length; i < lineLen; i++) {
        for(let j = 0; j < data[i].monitoringDataList.length; j++) {
          let point = data[i].monitoringDataList[j]
          imgTop = point.pollutionIndex > standard.pollutionIndex ? 0 : -16
          dataMarker = new AMap.Marker({
            position: [point.longitude, point.latitude],
            angle: -90,
            icon: new AMap.Icon({
              image: "/img/vehicle_mini.png",
              size: new AMap.Size(30, 16), //图标大小
              // imageOffset: new AMap.Pixel(imgLeft, imgTop)
            }),
            offset: new AMap.Pixel(-15, -8),
          });
          let infoWindow = new AMap.InfoWindow({
            anchor: 'middle-left',
          });
          let infoWindowPosition = dataMarker.getPosition()
          let infoClass = point.pollutionIndex > standard.pollutionIndex ? 'TableWarnRed' : ''
          dataMarker.on('click', (e) => {
            // <p><strong>超标因子：</strong>${data[i].overFactor}</p>
            infoWindow.setContent(`
              <p><strong>地理位置:</strong></p>
              <p style="margin-bottom: 5px;">经度：${point.longitude}  纬度：${point.latitude}</p>
              <p><strong>污染指数：</strong><span class="${infoClass}">${(point.pollutionIndex).toFixed(3)}</span></p>
              
              <p><strong>监测时间：</strong>${point.lastMonitor}</p>
              <p><strong>监测人员：</strong>${data[i].person}</p>
              <p><strong>车辆编号：</strong>${data[i].vehicleId}</p>
            `)
            // infoWindow.setContent('id： ' + curPoint.text)
            infoWindow.open(map, infoWindowPosition);
          });
          dataMarkers.push(dataMarker)
  
          path.push([point.longitude, point.latitude])
        }
        map.add(dataMarkers)
        // 绘制轨迹
        let polyline = new AMap.Polyline({
          map: map,
          path: path,
          showDir: true,  //显示线路径
          strokeColor: "#139e79",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid",  //线样式
          lineJoin: 'round' // 折线拐点连接处样式
        })
        path = []
      }

      map.setFitView();//地图自适应
    },
    routerDetail(name) {
      this.$router.push({path: '/mobileMonitor/overview/detail', query: {name: name}})
    }
  },
  async mounted() {
    this.mobileMonitorLoading = true

    await this.mapInit()

    await this.getVehicleNumList()

    this.searchForm.vehicleId = this.vehicleNumList ? this.vehicleNumList[0].name : "VE001"
    this.searchForm.startTime = common.changeDateToString(new Date(new Date().getTime() - 2592000000))
    this.searchForm.endTime = common.changeDateToString(new Date()) 

    await this.onSubmit()

    this.mobileMonitorLoading = false
  },
  computed: {
    ...mapGetters({
      vehicleNumList: 'getVehicleNumList',
      mobileData: 'getMobileData',
      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  destroyed() {
    map && map.destroy()
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.mobileMonitorOverview {
  position: relative;
  min-height: 100%;
}
.mobileMonitorOverview .title {
  position: relative;
  line-height: 70px;
  font-size: 16px;
}
.mobileMonitorOverview .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  padding: 25px 25px 10px 25px;
  background: rgba(255, 255, 255, 0.75);
  z-index: 2;
}
.searchBox .line {
  text-align: center
}
.mapBox {
  z-index: 1;
  width: 100%;
  height: 500px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.07);
  margin-bottom: 15px;
}
.mapBox .map {
  width: 100%;
  height: 100%;
}
.dataList {
  background: #fff;
  min-height: calc(100vh - 50px - 40px - 500px - 15px);
  padding: 0 20px;
}
.dataList .title {
  left: 20px;
}
</style>